<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
    .checkbox-inline input[type=checkbox] {
        position: inherit !important;
        margin-left: 0 !important;
    }
    .wizard-big.wizard > .content{
        min-height: 530px !important;

    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t wizard-big" id="signupForm">
                        <h1>产品</h1>
                        <fieldset>
                            <h2>产品信息</h2>
                            <div class="row" style="max-height: 450px;overflow-y: scroll;">
                                <input id="productId" name="productId" th:value="${product.productId}" type="hidden">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">产品名称：</label>
                                    <div class="col-sm-8">
                                        <input id="productName" name="productName" th:value="${product.productName}"
                                               class="form-control" type="text">
                                    </div>
                                </div>
<!--                                <div class="form-group">-->
<!--                                    <label class="col-sm-3 control-label">产品标识符：</label>-->
<!--                                    <div class="col-sm-8">-->
<!--                                        <input id="productIdent" name="productIdent" th:value="${product.productIdent}"-->
<!--                                               class="form-control" type="text">-->
<!--                                    </div>-->
<!--                                </div>-->
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">产品规格名称：</label>
                                    <div class="col-sm-8">
                                        <input id="productSpec" name="productSpec" th:value="${product.productSpec}"
                                               class="form-control" type="text">
                                    </div>
                                </div>

                                <div style="display: none" class="form-group">
                                    <label class="col-sm-3 control-label">包装数量：</label>
                                    <div class="col-sm-8">
                                        <input id="boxSize" name="boxSize" th:value="${product.boxSize}"
                                               class="form-control" type="number">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">价格：</label>
                                    <div class="col-sm-8">
                                        <input id="productPrice" name="productPrice" th:value="${product.productPrice}"
                                               class="form-control" type="number">
                                    </div>
                                </div>
                                <div class="form-group" shiro:hasPermission="procedures:procedures:procedures">
                                    <label class="col-sm-3 control-label">溯源模版：</label>
                                    <div class="col-sm-8">
                                        <select id="procedureId" name="procedureId" class="form-control">

                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label">产品图片：</label>
                                    <div class="col-sm-8">
                                        <input id="productImg" name="file" th:value="${product.productImg}"
                                               class="form-control" type="file">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">产品描述：</label>
                                    <div class="col-sm-8">
                                        <div id="editor" name="editor">

                                        </div>
                                        <input id="description" name="description" th:value="${product.description}"
                                               class="form-control" type="hidden">
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <h1 shiro:hasPermission="attr:attr:attr">产品属性</h1>
                        <fieldset shiro:hasPermission="attr:attr:attr">
                            <h2>产品信息</h2>
                            <div class="row pre-scrollable">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">产品类型：</label>
                                    <div class="col-sm-8">
                                        <select id="attrId" name="attrId" onchange="getAttrFieldByAttrId()"
                                                class="form-control">
                                            <option value="">不关联任何产品</option>
                                        </select>
                                    </div>
                                </div>
                                <div id="content">

                                </div>
                            </div>
                        </fieldset>
                        <!--<div class="form-group">-->
                        <!--<div class="col-sm-8 col-sm-offset-3">-->
                        <!--<button type="submit" class="btn btn-primary">提交</button>-->
                        <!--</div>-->
                        <!--</div>-->
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>

<script type="text/javascript" th:inline="javascript">


    $(document).ready(function () {
        var attrField = [[${product.productFieldVOS}]]
        console.log(attrField)

        var attrId;
        if (attrField!=null && attrField.length>0){
            attrId = attrField[0].attrId
        }
        getAttr(attrId)
        if(attrId != null && attrId != undefined){
            initAttrField(attrId,attrField)
        }

        getProcedures([[${product.procedureId}]]);
        fileSet();
        initEditor();
    });

    function fileSet() {
        $("#signupForm").steps({
            bodyTag: "fieldset",
            onStepChanging: function (event, currentIndex, newIndex) {
                // Always allow going backward even if the current step contains invalid fields!
                if (currentIndex > newIndex) {
                    return true;
                }

                // Forbid suppressing "Warning" step if the user is to young
                if (newIndex === 3 && Number($("#age").val()) < 18) {
                    return false;
                }

                var form = $(this);

                // Clean up if user went backward before
                if (currentIndex < newIndex) {
                    // To remove error styles
                    $(".body:eq(" + newIndex + ") label.error", form).remove();
                    $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
                }

                // Disable validation on fields that are disabled or hidden.
                form.validate().settings.ignore = ":disabled,:hidden";

                // Start validation; Prevent going forward if false
                return form.valid();
            },
            onStepChanged: function (event, currentIndex, priorIndex) {
                // Suppress (skip) "Warning" step if the user is old enough.
                if (currentIndex === 2 && Number($("#age").val()) >= 18) {
                    $(this).steps("next");
                }

                // Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
                if (currentIndex === 2 && priorIndex === 3) {
                    $(this).steps("previous");
                }
            },
            onFinishing: function (event, currentIndex) {
                var form = $(this);

                // Disable validation on fields that are disabled.
                // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
                form.validate().settings.ignore = ":disabled";

                // Start validation; Prevent form submission if false
                return form.valid();
            },
            onFinished: function (event, currentIndex) {
//                    var form = $(this);
//
//                    // Submit form input
//                    form.submit();
                var fieldResult = {};
                var fieldResultArr = new Array();
                var attrId = $("#attrId option:selected").val();
                if (attrId != null) {
                    var children = $("#content").children();
                    for (var i = 0; i < children.length; i++) {
                        var div = children[i];
                        var attrFieldId = $(div).find("input[name='attrFieldId']").val()

                        var fieldValue = $(div).find("[name='fieldValue']");
                        var fieldValueResult = '';
                        if (fieldValue.attr('type') == 'checkbox') {
                            fieldValueResult = $(div).find("input[type='checkbox']:checked").val()
                        } else if (fieldValue.attr('type') == 'radio') {
                            fieldValueResult = $(div).find("input[type='radio']:checked").val()
                        } else {
                            fieldValueResult = fieldValue.val()
                        }
                        fieldResult = {"attrFieldId":attrFieldId,"values":fieldValueResult,"attrId":attrId};
                        fieldResultArr.push(fieldResult)
                    }
                }
                update(fieldResultArr)
//
            },
            onCanceled: function () {
                parent.reLoad();
                var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                parent.layer.close(index);
            }

        }).validate({
            errorPlacement: function (error, element) {
                element.before(error);
            },
            rules: {
                confirm: {
                    equalTo: "#password"
                }
            }
        });
    }

    var E = window.wangEditor
    var editor = new E('#editor')

    function initEditor() {
//        var E = window.wangEditor
//        var editor = new E('#editor')
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
//            'quote',  // 引用
            'image',  // 插入图片
            'table',  // 表格
        ]
        editor.customConfig.uploadImgServer = ctx + '/common/sysFile/uploadOss'
        editor.create()
        var des = [[${product.description}]]
        editor.txt.html(des)
    }

    function setDescription() {
        var log = editor.txt.html()
        console.log(log)
        $("#description").val(log)
    }

    function initAttrField(attrField,sourcesData) {
        ajaxInitGetData(attrField,sourcesData)
    }

    function getAttrFieldByAttrId() {
        var val = $("#attrId option:selected").val();
        if (val != null) {
            ajaxGetData(val)
        }
    }

    function ajaxGetData(val) {
        $.ajax({
            url: ctx + "/attr/attrField/getAttrFieldByAttr",
            type: "post",
            data: {
                'attrId': val
            },
            success: function (r) {
                var data = r.data
                var text = ''
                for (var i in data) {
                    var element = data[i];
                    text += '<div  class="form-group">'
                    text += '<label class="col-sm-2 control-label">' + element.attrFieldName + '：</label>'
                    text += '<input type="hidden" name="attrFieldId" value="' + element.attrFieldId + '"/>'
                    text += '<div class="col-sm-8">'
                    if (element.type == 1) {
                        text += '<select class="form-control m-b" name="fieldValue">'
                        for (var x in element.fieldValueDOList) {
                            var childrenData = element.fieldValueDOList[x];
                            text += '<option value="' + childrenData.fieldValue + '">' + childrenData.fieldValue + '</option>'
                        }
                        text += '</select>'
                    } else if (element.type == 2) {
                        text += '<input type="text" name="fieldValue" class="form-control">'
                    } else if (element.type == 3) {
                        for (var x in element.fieldValueDOList) {
                            var childrenData = element.fieldValueDOList[x];
                            text += '<label class="checkbox-inline i-checks">'
                            text += '<input type="checkbox" value="' + childrenData.fieldValue + '" name="fieldValue"/> <i></i> ' + childrenData.fieldValue + ''
                            text += '</label>'
                        }
                    } else {
                        for (var x in element.fieldValueDOList) {
                            var childrenData = element.fieldValueDOList[x];
                            text += '<label class="checkbox-inline i-checks" style="width: 50px;display: inline-flex;">'
                            text += '<input type="radio" value="' + childrenData.fieldValue + '" name="fieldValue" style="margin-right: 5px;"/>' + childrenData.fieldValue + ''
                            text += '</label>'
                        }

                    }
                    text += '</div>'
                    text += '<div class="col-sm-1">'
                    text += '<button class="btn btn-primary" type="button" onclick="edit(' + element.attrFieldId + ')"><i class="glyphicon glyphicon-cog"></i></button>'
                    text += '</div>'
                    text += '<div class="col-sm-1">'
                    text += '<button class="btn btn-danger" type="button" onclick="remove(' + element.attrFieldId + ')"><i class="glyphicon glyphicon-remove"></i></button>'
                    text += '</div>'
                    text += '</div>'
//                            text +='<div class="hr-line-dashed"></div>'

                }
                $("#content").empty()
                $("#content").html(text);
            }
        });
    }

    function ajaxInitGetData(val,sourcesData) {
        $.ajax({
            url: ctx + "/attr/attrField/getAttrFieldByAttr",
            type: "post",
            data: {
                'attrId': val
            },
            success: function (r) {
                var data = r.data
                var text = ''
                for (var i in data) {
                    var element = data[i];
                    var myData;

                    for (var x in sourcesData){
                        if(sourcesData[x].attrFieldId == element.attrFieldId){
                            myData = sourcesData[x]
                        }
                    }

                    text += '<div  class="form-group">'
                    text += '<label class="col-sm-2 control-label">' + element.attrFieldName + '：</label>'
                    text += '<input type="hidden" name="attrFieldId" value="' + element.attrFieldId + '"/>'
                    text += '<div class="col-sm-8">'
                    if (element.type == 1) {
                        text += '<select class="form-control m-b" name="fieldValue">'
                        for (var x in element.fieldValueDOList) {
                            var childrenData = element.fieldValueDOList[x];
                            if (childrenData.fieldValue == myData.values){
                                text += '<option value="' + childrenData.fieldValue + '" selected="selected">' + childrenData.fieldValue + '</option>'
                            }else{
                                text += '<option value="' + childrenData.fieldValue + '">' + childrenData.fieldValue + '</option>'
                            }

                        }
                        text += '</select>'
                    } else if (element.type == 2) {
                        text += '<input type="text" name="fieldValue" class="form-control" value="'+myData.values+'">'
                    } else if (element.type == 3) {
                        for (var x in element.fieldValueDOList) {
                            var childrenData = element.fieldValueDOList[x];
                            text += '<label class="checkbox-inline i-checks">'
                            if (childrenData.fieldValue == myData.values){
                                text += '<input type="checkbox" value="' + childrenData.fieldValue + '" name="fieldValue" checked="checked"/> <i></i> ' + childrenData.fieldValue + ''
                            }else{
                                text += '<input type="checkbox" value="' + childrenData.fieldValue + '" name="fieldValue"/> <i></i> ' + childrenData.fieldValue + ''
                            }

                            text += '</label>'
                        }
                    } else {
                        for (var x in element.fieldValueDOList) {
                            var childrenData = element.fieldValueDOList[x];
                            text += '<label class="checkbox-inline i-checks" style="width: 50px;display: inline-flex;">'
                            if(childrenData.fieldValue == myData.values){
                                text += '<input type="radio" value="' + childrenData.fieldValue + '" name="fieldValue" checked="checked" style="margin-right: 5px;"/>' + childrenData.fieldValue + ''
                            }else{
                                text += '<input type="radio" value="' + childrenData.fieldValue + '" name="fieldValue" style="margin-right: 5px;"/>' + childrenData.fieldValue + ''
                            }
                            text += '</label>'
                        }

                    }
                    text += '</div>'
                    text += '<div class="col-sm-1">'
                    // text += '<button class="btn btn-primary" type="button" onclick="edit(' + element.attrFieldId + ')"><i class="glyphicon glyphicon-cog"></i></button>'
                    text += '</div>'
                    text += '<div class="col-sm-1">'
                    // text += '<button class="btn btn-danger" type="button" onclick="remove(' + element.attrFieldId + ')"><i class="glyphicon glyphicon-remove"></i></button>'
                    text += '</div>'
                    text += '</div>'
//                            text +='<div class="hr-line-dashed"></div>'

                }
                $("#content").empty()
                $("#content").html(text);
            }
        });
    }
</script>
<script type="text/javascript" src="/js/appjs/product/product/edit.js" th:src="@{/js/appjs/product/product/edit.js}">
</script>
</body>
</html>
